@import "./modules/reset";
@import "./modules/var";
@import "./modules/mixin";
@import "./modules/toast";
@import "./modules/nav";
@import "./modules/header";
@import "./modules/footer";
@import "./modules/asideShortCut";
body {
  background-color: #fff;
}
.top-bg {
  height: 150px;
  background: url('https://s18.mogucdn.com/b7/pic/150921/1d9lzj_ieyweoddgnrdanldgmzdambqmeyde_1920x150.jpg') no-repeat center;
  background-size: cover;
}
.detail-nav {
  height: 30px;
  line-height: 30px;
  background-color: #4D4D4D;
  color: #ffffff;
  ul {
    height: 30px;
    li {
      float: left;
      height: 30px;
      padding: 0 15px;
      border-right: 1px solid #5C5C5C;
      cursor: pointer;
      &:hover {
        color: #5C5C5C;
        background-color: #fff;
      }
    }
  }
}
.goods-detail {
  margin-top: 50px;
  .left-detail {
    width: 1058px;
    .img-detail {
      width: 400px;
      .img {
        position: relative;
        width: 100%;
        height: 600px;
        >img {
          width: 100%;
          height: 100%;
        }
        &:hover {
          .mask, .bigImg {
            display: block;
          }
        }
        .mask {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0,0,0,.5);
          cursor: move;
        }
        .bigImg {
          display: none;
          position: absolute;
          overflow: hidden;
          top: 0;
          z-index: 20;
          left: 400px;
          >img {
            position: absolute;
            width: 800px;
            height: 1200px;
          }
        }
      }
      .img-list-wrap {
        position: relative;
        .img-list {
          position: relative;
          overflow: hidden;
          width: 350px;
          margin-top: 40px;
          margin-left: 25px;
          height: 60px;
          
          ul {
            position: absolute;
            width: 10000%;
            li {
              float: left;
              width: 60px;
              height: 60px;
              margin: 0 5px;
              img {
                width: 100%;
                height: 100%;
                opacity: 0.5;
                cursor: pointer;
                &:hover {
                  opacity: 1;
                }
              }
            }
          }
        }
        
        .prev, .next {
          display: none;
          position: absolute;
          width: 20px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          color: #9A9A9A;
          font-size: 20px;
          top: 50%;
          cursor: pointer;
          transform: translateY(-50%);
        }
        .prev {
          left: 0;
        }
        .next {
          right: 0;
        }
      }
    }

    .goods-info {
      width: 500px;
      margin-left: 40px;
      .title {
        font-size: 24px;
        font-weight: 700;
        line-height: 30px;
      }
      .main-box {
        background-color: #F6F6F6;
        height: 32px;
        line-height: 32px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0 10px;
        .price {
          .price-text {
            font-size: 20px;
            font-weight: 700;
            color: #f00;
          }
        }
        .sales {
          margin-left: 20px;
        }
      }
      .service {
        line-height: 24px;
        height: 24px;
        span.service-title {
          width: 60px;
        }
        img {
          width: 85px;
          height: 24px;
        }
      }
      .params {
        margin-top: 20px;
        line-height: 28px;
        span.params-title {
          width: 60px;
        }
        .params-list {
          float: left;
          width: 400px;
          max-height: 110px;
          overflow-y: auto;
          padding-top: 5px;
          &::-webkit-scrollbar {
            width: 5px;
          }
          &::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.3);
            border-radius: 5px;
          }
          &::-webkit-scrollbar-track {
            background-color: #ddd;
            border-radius: 5px;
          }
          li {
            float: left;
            border: 1px solid #DDDDDD;
            padding: 0 10px;
            margin: 0 5px;
            cursor: pointer;
            margin-bottom: 5px;
            transition: outline 0.2s;
            &:hover {
              border-color: #666;
              outline: 1px solid #666;
            }
          }
          li.active {
            border-color: #666;
            outline: 1px solid #666;
          }
        }
      }
      .counter {
        margin-top: 20px;
        line-height: 25px;
        height: 27px;
        span.counter-title {
          width: 60px;
        }
        .counters {
          width: 97px;
          height: 27px;
          border: 1px solid #ddd;
          margin-right: 15px;
          .dec, .inc {
            width: 24px;
            height: 25px;
            text-align: center;
            cursor: pointer;
          }
          input {
            width: 47px;
            height: 25px;
            text-align: center;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
          }
        }
        .store {
          color: #999;
        }
      }
      .operation {
        padding-left: 60px;
        margin-top: 30px;
        .buy-now {
          width: 200px;
          height: 50px;
          background-color: #EF2F23;
          font-size: 18px;
          color: #fff;
          cursor: pointer;
        }
        .turn-into-cart {
          width: 200px;
          height: 50px;
          border: 1px solid #DDDDDD;
          background-color: #fff;
          font-size: 18px;
          cursor: pointer;
          margin-left: 8px;
        }
      }
      .service-intro {
        margin-top: 20px;
        line-height: 24px;
        height: 24px;
        span.intro-title {
          width: 60px;
        }
        ul {
          li {
            float: left;
            margin: 0 8px;
            white-space: nowrap;
            i {
              float: left;
              margin-right: 5px;
              @include setbgimg(24px, 24px, "https://s11.mogucdn.com/mlcdn/c45406/180417_25kbfg1c3hdbd120394ji4b11bk2k_36x36.png");
            }
            .intro-text {
              float: left;
            }
          }
        }
      }
    }

  }
  .right-recommend {
    width: 141px;
    padding-left: 20px;
    border-left: 1px solid #EEEEEE;
    .recommend-title {
      line-height: 30px;
      height: 30px;
      text-align: center;
      font-size: 16px;
      color: #999;
    }
    .recommend-list {
      li {
        margin-bottom: 10px;
        img {
          width: 100%;
        }
        p.price {
          text-align: center;
          margin-top: 5px;
        }
      }
    }
  }
  
}


img.flycart {
  display: none;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.goods-sdetail {
  margin-top: 50px;
  .product-params {
    width: 738px;
    border: 1px solid #E5E5E5;
    ul.title {
      height: 58px;
      line-height: 58px;
      background-color: #F6F6F6;
      margin-bottom: 40px;
      li {
        float: left;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        border-right: 1px solid #E5E5E5;
      }
      li.active {
        background-color: #fff;
      }
    }
    ul.content {
      padding: 0 20px;
      .tabcard {
        display: none;
      }
      .tabcard.current {
        display: block;
      }
      >li.product-detail {
        .title {
          font-size: 18px;
          font-weight: 700;
          line-height: 40px;
          margin-bottom: 20px;
          .tit {
            text-decoration: underline;
          }
        }
        .goods-desc {
          .content {
            font-size: 14px;
          }
        }
        .goods-params {
          margin-top: 50px;
          .content {
            li {
              width: 230px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              height: 35px;
              line-height: 33px;
              padding-left: 10px;
              float: left;
              border: 1px solid #EEEEEE;
            }
          }
        }
        .size-rules {
          margin-top: 40px;
          .content {
            width: 100%;
            font-size: 0;
            border-collapse: collapse;
            tr:first-child {
              background-color: #EEEEEE;
            }
            td {
              line-height: 32px;
              height: 33px;
              text-align: center;
              font-size: 12px;
              border-bottom: 1px solid #EEEEEE;
            }
          }
          .tip {
            line-height: 30px;
            color: #A699B3;
            margin-top: 20px;
          }
        }
        .effects {
          .content {
            li {
              margin-top: 10px;
              img {
                width: 100%;
              }
            }
          }
        }
      }
      >li.comment {
        padding-bottom: 20px;
        .title {
          font-size: 18px;
          font-weight: 700;
          line-height: 40px;
          margin-bottom: 20px;
          .tit {
            text-decoration: underline;
          }
        }
        ul.content {
          li {
            margin: 30px 0;
            border-bottom: 1px solid #bfbfbf;
            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .cinfo {
              width: 550px;
              margin-left: 20px;
              .uname {
                font-size: 14px;
                line-height: 26px;
              }
              .rate {
                font-size: 14px;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .size-info {
                color: #666;
                margin: 5px 0;
              }
              .photos {
                li {
                  float: left;
                  width: 40px;
                  height: 40px;
                  margin-right: 5px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .floors-wrapper {
    position: sticky;
    top: 70px;
    margin-left: 10px;
    text-align: center;
    width: 240px;
    height: 100%;
    border: 1px solid #E5E5E5;
    .title {
      position: relative;
      text-align: center;
      line-height: 58px;
      height: 58px;
      cursor: pointer;
      background-color: #F6F6F6;
      &:hover {
        i.arrow {
          transform: rotate(-180deg);
        }
        .qrcodeimg {
          height: 230px;
        }
      }
      i.qrcode {
        font-size: 24px;
        vertical-align: middle;
        margin-left: 20px;
      }
      i.arrow {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        transition: transform 0.3s;
      }
      .qrcodeimg {
        position: absolute;
        width: 100%;
        top: 58px;
        background-color: #fff;
        text-align: center;
        height: 0;
        overflow: hidden;
        transition: height 0.5s;
        img {
          width: 170px;
          height: 170px;
          margin: 30px 0;
        }
      }
    }
    .floors {
      ul {
        li {
          line-height: 30px;
          height: 30px;
          margin: 10px 0;
          font-size: 14px;
          cursor: pointer;
        }
        li.current {
          background: url('https://s10.mogucdn.com/p1/150914/upload_ie2wgnrtmy4tim3bgmzdambqhayde_204x30.png') no-repeat center;
          background-size: auto 30px;
        }
      }
    }
  }
}

.go-to-cart {
  display: none;
  position: fixed;
  right: 30px;
  top: 70px;
  width: 562px;
  padding: 0 30px;
  background-color: #fff;
  border: 1px solid #ddd;
  >.title {
    line-height: 28px;
    font-size: 18px;
    margin-top: 30px;
    text-align: center;
    i {
      display: inline-block;
      vertical-align: top;
      width: 28px;
      height: 28px;
      margin-right: 5px;
      background: url('https://s10.mogucdn.com/p1/150928/upload_iezgczbzmq2tgolfgmzdambqmmyde_66x230.png') no-repeat -20px -184px;
    }
  }
  .but {
    margin-top: 20px;
    text-align: center;
    button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      margin: 0 15px;
      border-radius: 3px;
      cursor: pointer;
    }
    button.stayhere {
      border: 1px solid #DDDDDD;
      background-color: #fff;
    }
    button.gotocart {
      background-color: #EF2F23;
      color: #fff;
      i {
        margin-left: 5px;
      }
    }
  }
  .buy-list {
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    >.title {
      margin-bottom: 15px;
    }
    ul {
      li {
        float: left;
        width: 110px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 100%;
        }
        p.title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    right: 10px;
    top: 5px;
    color: #000;
    cursor: pointer;
  }
}